<!DOCTYPE html>
<html>
	<head>
		<title>User List</title>
		<%include ../common/link%>
		<style>
		</style>
	</head>
	<body>
		<% include ../common/header %>
		<div class="container" style="margin-top:5%">
			<h3 class="text-center">Users List</h3>
			<table class="table table-bordered table-striped table-hover">
				<!--table header-->
				<tr>
					<th>ID</th>
					<th>Username</th>
					<th>Sex</th>
					<th>Age</th>
					<th>Email</th>
					<th>Phone</th>
					<th>Edit</th>
				</tr>
				<% 
					userList.forEach(function(user){
				%>
					<tr>
						<td><%=user._id %></td>
						<td><%=user.username %></td>
						<td><%=user.sex==1?'Male':(user.sex==2?'Female':'Secret') %></td>
						<td><%=user.age %></td>
						<td><%=user.email %></td>
						<td><%=user.phone %></td>
						<td>
							<a class='btn-sm btn-primary' name='edit'> Edit</a>
							<a class="btn-sm btn-danger" name="delete">Delete</a>
						</td>
					</tr>
				<%
					});
				%>
			</table>
			<div class="modal fade in"  id="delete_modal" tabindex="-1">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<a class="close" data-dismiss="modal">&times;</a>
							<h4>Confirm delete User</h4>
						</div>
						<div class="modal-body">
							Are you sure to delete user <span id="user_delete"></span> ?
						</div>
						<div class="modal-footer">
							<a href="#" class="btn btn-danger" id="delete_yes">Yes</a>
							<a href="#" class="btn btn-primary" name="cancel">Cancel</a>
						</div>
					</div>
				</div>
			</div>

			<div class="modal fade in"  id="update_modal" tabindex="-1">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<a class="close" data-dismiss="modal">&times;</a>
							<h4>Update User Info</h4>
						</div>
						<div class="modal-body text-left">
							<form class="form-horizontal" id="userInfo">
								<input type="hidden" name="_id" />
								<div class="form-group">
									<div class="col-md-3">
										<label >Username</label>
									</div>
									<div class="col-md-6">
										<input type="text" name="username" value=""/>
									</div>
								</div>
								<div class="form-group">
									<div class="col-md-3">
										<label >Sex</label>
									</div>
									<div class="col-md-6">
										<label class="radio-inline"><input type="radio" name="sex" value="1" required>Male</input></label>
										<label class="radio-inline"><input type="radio" name="sex" value="2" required>Female</input></label>
										<label class="radio-inline"><input type="radio" name="sex" value="3" required>Secret</input></label>
									</div>
								</div>
								<div class="form-group">
									<div class="col-md-3">
										<label >Age</label>
									</div>
									<div class="col-md-6">
										<input type="number" name="age" value=""/>
									</div>
								</div>
								<div class="form-group">
									<div class="col-md-3">
										<label >Email</label>
									</div>
									<div class="col-md-6">
										<input type="email" name="email" value=""/>
									</div>
								</div>
								<div class="form-group">
									<div class="col-md-3">
										<label >Phone</label>
									</div>
									<div class="col-md-6">
										<input type="text" name="phone" value=""/>
									</div>
								</div>
							</form>
						</div>
						<div class="modal-footer">
							<a href="#" class="btn btn-danger" id="update_yes">Yes</a>
							<a href="#" class="btn btn-primary" name="cancel">Cancel</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<% include ../common/footer %>
		
	</body>
	<script type="text/javascript">
		var selected_id = "";
		$(function(){
			//open modal for delete
			$('[name="delete"]').click(function(){
				var _id = $(this).parent().parent().children()[0].innerHTML;
				var username = $(this).parent().parent().children()[1].innerHTML;
				selected_id = _id;
				$("#user_delete").html(username);
				$("#delete_modal").modal();
			});

			//open modal for update
			$('[name="edit"]').click(function(){
				var _id = $(this).parent().parent().children()[0].innerHTML;
				$.get('/users/getUserInfo',{_id:_id},function(data){
					$('[name="username"]').val(data.username);
					$('[name="age"]').val(data.age);
					$('[name="email"]').val(data.email);
					$('[name="phone"]').val(data.phone);
					$('[name="sex"][value="'+data.sex+'"]').attr("checked",true);
					$('[name="_id"]'). val(data._id);
					$("#update_modal").modal();
				});
			});

			//click cancel button
			$("[name='cancel']").click(function(){
				$("#update_modal").modal('hide');
				$("#delete_modal").modal('hide');
			})
		});

		
		//click delete yes button
		$("#delete_yes").click(function(){
			//alert(selected_id);
			$.post("/users/deleteUser",{_id:selected_id},function(msg){
				if(msg.success == 1){
					window.location.reload();
				}else{
					alert(msg.info);
				}
				$("#delete_modal").modal('hide');
			});
		});

		//click update yes button
		$("#update_yes").click(function(){
			var userForm = $("#userInfo").serializeArray();
			var formObj = {};
			$.each(userForm,function(){
				formObj[this.name] = this.value;
			});
			console.log(formObj);
			$.post('/users/updateUser',formObj,function(msg){
				var result = eval(msg);
				if(result.success == 1){
					window.location.reload();
				}else{
					alert(result.info);
				}
				$("#update_modal").modal('hide');
			});
			//console.log(userForm);
			
		})
	</script>
</html>